import React, { useState, useEffect } from 'react';
import { Card, Row, Col, Skeleton, Avatar, Divider, Typography } from 'antd';
import ReactECharts from 'echarts-for-react';
import { WorkplaceTotal, Project, Notice, Shortcut, UserAccessSource, WeeklyUserActivity } from './types';
import './index.css';

const { Title, Text } = Typography;

const Home: React.FC = () => {
  const [loading, setLoading] = useState(true);
  const [totalState, setTotalState] = useState<WorkplaceTotal>({
    project: 0,
    access: 0,
    todo: 0
  });
  const [projects, setProjects] = useState<Project[]>([]);
  const [notices, setNotices] = useState<Notice[]>([]);
  const [shortcuts, setShortcuts] = useState<Shortcut[]>([]);
  const [userAccessData, setUserAccessData] = useState<UserAccessSource[]>([]);
  const [weeklyActivityData, setWeeklyActivityData] = useState<WeeklyUserActivity[]>([]);

  // 模拟数据加载
  useEffect(() => {
    const loadData = async () => {
      // 模拟API调用延迟
      await new Promise(resolve => setTimeout(resolve, 1000));
      
      // 设置统计数据
      setTotalState({
        project: 40,
        access: 2340,
        todo: 10
      });

      // 设置项目数据
      setProjects([
        {
          name: 'ruoyi-vue-pro',
          icon: '🚀',
          message: 'https://github.com/YunaiV/ruoyi-vue-pro',
          personal: 'Spring Boot 单体架构',
          time: new Date()
        },
        {
          name: 'yudao-ui-admin-vue3',
          icon: '🎯',
          message: 'https://github.com/yudaocode/yudao-ui-admin-vue3',
          personal: 'Vue3 + element-plus',
          time: new Date()
        },
        {
          name: 'yudao-ui-admin-vben',
          icon: '⚡',
          message: 'https://github.com/yudaocode/yudao-ui-admin-vben',
          personal: 'Vue3 + vben(antd)',
          time: new Date()
        },
        {
          name: 'yudao-cloud',
          icon: '☁️',
          message: 'https://github.com/YunaiV/yudao-cloud',
          personal: 'Spring Cloud 微服务架构',
          time: new Date()
        },
        {
          name: 'yudao-ui-mall-uniapp',
          icon: '📱',
          message: 'https://github.com/yudaocode/yudao-ui-admin-uniapp',
          personal: 'Vue3 + uniapp',
          time: new Date()
        },
        {
          name: 'yudao-ui-admin-vue2',
          icon: '🔧',
          message: 'https://github.com/yudaocode/yudao-ui-admin-vue2',
          personal: 'Vue2 + element-ui',
          time: new Date()
        }
      ]);

      // 设置通知数据
      setNotices([
        {
          title: '系统支持 JDK 8/17/21，Vue 2/3',
          type: '通知',
          keys: ['通知', '8', '17', '21', '2', '3'],
          date: new Date()
        },
        {
          title: '后端提供 Spring Boot 2.7/3.2 + Cloud 双架构',
          type: '公告',
          keys: ['公告', 'Boot', 'Cloud'],
          date: new Date()
        },
        {
          title: '全部开源，个人与企业可 100% 直接使用，无需授权',
          type: '通知',
          keys: ['通知', '无需授权'],
          date: new Date()
        },
        {
          title: '国内使用最广泛的快速开发平台，超 300+ 人贡献',
          type: '公告',
          keys: ['公告', '最广泛'],
          date: new Date()
        }
      ]);

      // 设置快捷入口数据
       setShortcuts([
         { name: 'Github', icon: '🐙', url: 'https://github.com' },
         { name: 'Vue', icon: '💚', url: 'https://vuejs.org' },
         { name: 'Vite', icon: '⚡', url: 'https://vitejs.dev' },
         { name: 'Angular', icon: '🅰️', url: 'https://angular.io' },
         { name: 'React', icon: '⚛️', url: 'https://reactjs.org' },
         { name: 'Webpack', icon: '📦', url: 'https://webpack.js.org' }
       ]);

       // 设置用户访问来源数据
       setUserAccessData([
         { value: 335, name: '直接访问' },
         { value: 310, name: '邮件营销' },
         { value: 234, name: '联盟广告' },
         { value: 135, name: '视频广告' },
         { value: 1548, name: '搜索引擎' }
       ]);

       // 设置周活跃量数据
       setWeeklyActivityData([
         { value: 13253, name: '周一' },
         { value: 34235, name: '周二' },
         { value: 26321, name: '周三' },
         { value: 12340, name: '周四' },
         { value: 24643, name: '周五' },
         { value: 1322, name: '周六' },
         { value: 1324, name: '周日' }
       ]);

       setLoading(false);
    };

    loadData();
  }, []);

  // 饼图配置
  const pieOption = {
    title: {
      text: '用户访问来源',
      left: 'center'
    },
    tooltip: {
      trigger: 'item',
      formatter: '{a} <br/>{b} : {c} ({d}%)'
    },
    legend: {
      orient: 'vertical',
      left: 'left',
      data: userAccessData.map(item => item.name)
    },
    series: [
      {
        name: '访问来源',
        type: 'pie',
        radius: '55%',
        center: ['50%', '60%'],
        data: userAccessData,
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        }
      }
    ]
  };

  // 柱状图配置
  const barOption = {
    title: {
      text: '周活跃量',
      left: 'center'
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      }
    },
    grid: {
      left: 50,
      right: 20,
      bottom: 20
    },
    xAxis: {
      type: 'category',
      data: weeklyActivityData.map(item => item.name),
      axisTick: {
        alignWithLabel: true
      }
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        name: '活跃量',
        data: weeklyActivityData.map(item => item.value),
        type: 'bar',
        itemStyle: {
          color: '#1890ff'
        }
      }
    ]
  };

  return (
    <div className="home-container">
      {/* 欢迎区域 */}
      <Card className="welcome-card">
        <Skeleton loading={loading} avatar active>
          <div className="welcome-content">
            <Avatar size={64} src="/assets/logo.svg" />
            <div className="welcome-text">
              <Title level={3}>早安，管理员，开始您一天的工作吧！</Title>
              <Text type="secondary">今日晴，20℃ - 32℃！</Text>
            </div>
          </div>
        </Skeleton>
      </Card>

      {/* 数据统计区域 */}
      <Row gutter={[16, 16]} className="stats-row">
        <Col xs={24} sm={8}>
          <Card className="stat-card">
            <Skeleton loading={loading} active>
              <div className="stat-content">
                <div className="stat-icon project">📊</div>
                <div className="stat-info">
                  <div className="stat-number">{totalState.project}</div>
                  <div className="stat-label">项目数</div>
                </div>
              </div>
            </Skeleton>
          </Card>
        </Col>
        <Col xs={24} sm={8}>
          <Card className="stat-card">
            <Skeleton loading={loading} active>
              <div className="stat-content">
                <div className="stat-icon access">👥</div>
                <div className="stat-info">
                  <div className="stat-number">{totalState.access}</div>
                  <div className="stat-label">访问量</div>
                </div>
              </div>
            </Skeleton>
          </Card>
        </Col>
        <Col xs={24} sm={8}>
          <Card className="stat-card">
            <Skeleton loading={loading} active>
              <div className="stat-content">
                <div className="stat-icon todo">📝</div>
                <div className="stat-info">
                  <div className="stat-number">{totalState.todo}</div>
                  <div className="stat-label">待办事项</div>
                </div>
              </div>
            </Skeleton>
          </Card>
        </Col>
      </Row>

      {/* 主要内容区域 */}
      <Row gutter={[16, 16]} className="main-content">
        {/* 项目列表 */}
        <Col xs={24} lg={12}>
          <Card title="项目" className="project-card">
            <Skeleton loading={loading} active>
              <div className="project-list">
                {projects.map((project, index) => (
                  <div key={index} className="project-item">
                    <div className="project-icon">{project.icon}</div>
                    <div className="project-info">
                      <div className="project-name">{project.name}</div>
                      <div className="project-desc">{project.personal}</div>
                    </div>
                    <div className="project-link">
                      <a href={project.message} target="_blank" rel="noopener noreferrer">
                        访问
                      </a>
                    </div>
                  </div>
                ))}
              </div>
            </Skeleton>
          </Card>
        </Col>

        {/* 快捷入口 */}
        <Col xs={24} lg={12}>
          <Card title="快捷入口" className="shortcut-card">
            <Skeleton loading={loading} active>
              <div className="shortcut-grid">
                {shortcuts.map((shortcut, index) => (
                  <div key={index} className="shortcut-item">
                    <a href={shortcut.url} target="_blank" rel="noopener noreferrer">
                      <div className="shortcut-icon">{shortcut.icon}</div>
                      <div className="shortcut-name">{shortcut.name}</div>
                    </a>
                  </div>
                ))}
              </div>
            </Skeleton>
          </Card>
        </Col>
      </Row>

      {/* 图表区域 */}
       <Row gutter={[16, 16]} className="chart-row">
         <Col xs={24} lg={12}>
           <Card title="用户访问来源" className="chart-card">
             <Skeleton loading={loading} active>
               <ReactECharts option={pieOption} style={{ height: '400px' }} />
             </Skeleton>
           </Card>
         </Col>
         <Col xs={24} lg={12}>
           <Card title="周活跃量" className="chart-card">
             <Skeleton loading={loading} active>
               <ReactECharts option={barOption} style={{ height: '400px' }} />
             </Skeleton>
           </Card>
         </Col>
       </Row>

       {/* 通知公告 */}
       <Card title="通知公告" className="notice-card">
         <Skeleton loading={loading} active>
           <div className="notice-list">
             {notices.map((notice, index) => (
               <div key={index} className="notice-item">
                 <Avatar size="small" className={`notice-avatar ${notice.type}`}>
                   {notice.type === '通知' ? '通' : '公'}
                 </Avatar>
                 <div className="notice-content">
                   <div className="notice-title">{notice.title}</div>
                   <div className="notice-time">
                     {new Date(notice.date).toLocaleDateString()}
                   </div>
                 </div>
               </div>
             ))}
           </div>
         </Skeleton>
       </Card>
     </div>
   );
 };

export default Home;